<template>
  <el-descriptions border :column="2">
    <el-descriptions-item :span="1" label="开始时间">{{ dataForm.startTime }}</el-descriptions-item>
    <el-descriptions-item :span="1" label="结束时间">{{ dataForm.endTime }}</el-descriptions-item>
    <el-descriptions-item :span="2" label="请假天数">{{ dataForm.days }}天</el-descriptions-item>
    <el-descriptions-item label="请假理由"
                          :span="2"
    >
      {{ dataForm.reasons }}
    </el-descriptions-item>
  </el-descriptions>
</template>

<script setup lang="ts">
import dayjs from "dayjs";
import {getNextTaskNode} from "/@/api/flow/BaseFlowApi";
import {FlowInstanceModel, FlowNodeModel, NextTaskModel} from "/@/api/flow/model/FlowBaseModel";
import {selectVacationByVacationId} from "/@/api/demo/VacationApi";
import {ref} from "vue";

const loading = ref(false)
const dataForm = ref<any>({
  startTime: '',
  endTime: '',
  reasons: '',
  days: ''
})
const task = ref()
const init = async (taskInstance: FlowInstanceModel) => {
  task.value = taskInstance
  loading.value = true
  let res = await selectVacationByVacationId(taskInstance.businessId)
  dataForm.value = res
  dataForm.value.days = leaveDays(res.startTime, res.endTime)
  loading.value = false
}
const getNextTask = async (): Promise<NextTaskModel> => {
  let res = (await getNextTaskNode({
    instanceId: task.value.instanceId,
    params: {var: dataForm.value.days}
  })) as FlowNodeModel[];
  return {
    nodes: res,
    variables: {var: dataForm.value.days}
  };
}
const getExtension = (): object => {
  return {}
}
const leaveDays = (startTime, endTime) => {
  let number = dayjs(endTime).diff(dayjs(startTime), 'day');
  return number
}
defineExpose({init, getNextTask,getExtension})
</script>

<style scoped>

</style>